// 如果你在 Next.js 当中使用了 App Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
// https://ant-design.antgroup.com/docs/react/use-with-next-cn#%E4%BD%BF%E7%94%A8-app-router
'use client';

import React from 'react';
// import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
// 如果您使用的是 Next.js 14，请改用下面的导入。更多信息： https://github.com/ant-design/ant-design/issues/45567
import type Entity from '@ant-design/cssinjs/es/Cache';
import {
  createCache,
  extractStyle,
  legacyLogicalPropertiesTransformer,
  StyleProvider,
} from '@ant-design/cssinjs/es';
import { useServerInsertedHTML } from 'next/navigation';

const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
  const cache = React.useMemo<Entity>(() => createCache(), []);
  const isServerInserted = React.useRef<boolean>(false);
  useServerInsertedHTML(() => {
    // 避免 css 重复插入
    if (isServerInserted.current) {
      return;
    }
    isServerInserted.current = true;
    return (
      <style
        id="antd"
        dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}
      />
    );
  });
  return (
    <StyleProvider
      hashPriority="high"
      cache={cache}
      transformers={[legacyLogicalPropertiesTransformer]}
    >
      {children}
    </StyleProvider>
  );
};

export default StyledComponentsRegistry;
